<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


<head>
    <meta charset="utf-8">
    <title>Echarts集成 - 柱状图</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" th:href="@{static/layuiadmin/layui/css/layui.css}"
        media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" th:href="@{static/layuiadmin/style/admin.css}"
        media="all">
    <link rel="stylesheet" href="../css/time.css" th:href="@{static/css/time.css}">
    <script type="text/javascript" src="../js/echarts.js" th:src="@{static/js/echarts.js}"></script>
    <!--<script src="../js/echarts.min.js" th:src="@{static/js/echarts.min.js}"></script>-->
    <script type="text/javascript" src="examOver_files/jquery.js" th:src="@{static/pages/examOver_files/jquery.js}"></script>
    <script>
    	$(function(){
    		window.onload=function(){ 	
			   	var myCanvas = echarts.init(document.getElementById('main2'));
			   	myCanvas.showLoading();
			   	var tmp = "";
			   	var data = [];
			   	$.ajax({
	        	type:"post",
	        	url:"querydata",
	        	async:true,
	        	dataType:'json',//'application/json;charset=UTF-8',//request请求的类型是json类型,字符编码是utf-8
				data:tmp,//将json对象转换成字符串,再向后台传递
				success:function(result){
					if(result)
					{
						for(var i=0;i<result.length;i++){
							data.push(result[i]);
						}
							option = {
						    title : {
						        text: '能力雷达',
						        subtext: '个人实况数据'
						    },
						    tooltip : {
						        trigger: 'axis'
						    },
						    legend: {
						        x : 'center',
						        data:['正确率']
						    },
						    toolbox: {
						        show : true,
						        feature : {
						            mark : {show: true},
						            /*dataView : {show: true, readOnly: false}*/
						        }
						    },
						    calculable : true,
						    polar : [
						        {
						            indicator : [
						                {text : '单选', max  : 1},
						                {text : '多选', max  : 1},
						                {text : '判断', max  : 1},
						                {text : '填空', max  : 1},
						                {text : '简答', max  : 1}
						            ],
						            radius : 80
						        }
						    ],
						    series : [
						        {
						            name: '个人实况能力数据',
						            type: 'radar',
						            itemStyle: {
						                normal: {
						                    areaStyle: {
						                        type: 'default'
						                    }
						                }
						            },
						            data : [
						                {
						                    value : data,
						                    name : '正确率'
						                }
						                
						            ]
						        }
						    ]
						};
						myCanvas.hideLoading();//隐藏上面加载的动画
						myCanvas.setOption(option);
					}
						
				},
				error:function(e){
					console.log(e);
					layui.use(['layer', 'form'], function(){
				  		var layer = layui.layer
				  			,form = layui.form;
				  			layer.msg('出错了');
					});
				}
	        });
			   	
			   	
			   	
			    
			
		}
	   // 图表随着浏览器窗体变化而变化
	 /*  window.onresize = function(){
			myCanvas.resize();
		}*/
    	})
   
    </script>

</head>

<style>
    #datasource {
        height: 266px;
    }



    .gradelist {
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;

    }
</style>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
        	 <div class="layui-col-md4">
                <div class="layui-card" style="height: 266px;">
                    <div class="layui-card-body">
						<!--style="width:600px; height:400px"-->

 					<div id="main2" style="width:356px; height:266px"></div>
					<!--<div class="chart_box">
					      <div class="" id='chinesechart'>
					      </div>
					</div>-->



                    </div>
                </div>


            </div>

            <div class="layui-col-md4">
                <div class="layui-card" id="datasource">
                    <div class="layui-card-body">
						






                    </div>
                </div>


            </div>

            <div class="layui-col-md4">
                <div class="layui-card" style="height: 123px">

                    <div class="layui-card-body">
                        <div style="margin-top:10px">
                            <span style="font-size: 20px;color:orange;">
                                <i class="layui-icon layui-icon-flag"></i>
                                	待作答
                            </span>
                            <span style="font-size: 20px;color:orange;margin-left: 20px" id="numberOfNotAnswered"> </span>
                            <br> <br>
                        </div>

                        <hr class="layui-bg-blue">
                        <p>待作答试卷包含答题中、未作答以及已过期的试卷
                        </p>
                    </div>
                </div>
                <div class="layui-card" style="height: 123px;margin-top:20px">
                    <div class="layui-card-body">
                        <div style="margin-top:10px">
                            <span style="font-size: 20px;color:orangered;">
                                <i class="layui-icon layui-icon-template-1"></i>
                                已完成
                            </span>
                            <span style="font-size: 20px;margin-left: 20px;color:orangered" id="numberOfAnswered">
                            </span>
                            <br>
                            <br>
                        </div>
                        <hr class="layui-bg-blue">
                        <p>点击可查看已完成考试的成绩与详细报告
                        </p>

                    </div>

                </div>

            </div>
            <div class="layui-col-md12" style="height: auto">
                <div class="layui-card">
                    <div class="layui-card-header" >
                        待作答
                    </div>
                    <div class="layui-card-body" id="showNotAnsweredInfo">
                      
                 
                    </div>
                    <div id="middlepage" class="layui-col-md4 layui-col-md-offset5"></div>
                </div>


            </div>
            <div class="layui-col-md12">
                <div class="layui-card" style="height:auto;">


                    <div class="layui-card-header">
                        <label style="font-size: 50">
                            成绩列表
                        </label>

                    </div>
                    <div class="layui-card-body">
                        <ul class="layui-timeline" id="showgradelist">
                            
                        </ul>
                    </div>



                </div>


            </div>
        </div>
    </div>


    <script src="../layuiadmin/layui/layui.js" th:src="@{static/layuiadmin/layui/layui.js}"></script>
    <script>
        layui.use(['laypage', 'form'], function () {
            var laypage = layui.laypage;
            var form = layui.form;
            var $ = layui.$;



            form.render();
            $.ajax({
                url: "/getStudentIndexData",
                async:false,
                type: "POST",
                dataType: "json",
                success: function (data) {
                    console.log(JSON.stringify(data))
                    $("#numberOfAnswered").html(data.numberOfAnswered)
                    $("#numberOfNotAnswered").html(data.numberOfNotAnswered)
                    echarts.init(document.getElementById('datasource')).setOption({
                        series: {
                            color: ['red', 'orange'],
                            type: 'pie',
                            data: [
                                { name: '已完成', value: data.numberOfAnswered},
                                { name: '待作答', value: data.numberOfNotAnswered },

                            ],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{b} : {c}  ({d}%)'
                                    },
                                    labelLine: { show: true }
                                }
                            }
                        }
                    });
                    var str=[]
                    for(var i=0;i<data.notAnsweredPapers.length;i++){
                        str.push(`<div class="layui-card"
                            style="height: 130px;margin-top:10px;border-top:2px solid aqua;border-left:1px solid #e2e2e2;border-right:1px solid #e2e2e2;border-bottom: 1px solid #e2e2e2">
                            <div class="layui-card-body">

                                <div class="layui-row layui-col-space15">
                                    <div class="layui-col-md9">
                                        <p>${data.notAnsweredPapers[i].paperName}</p>
                                        <p><i class="iconfont icon-time"
                                                style="color:rgb(0,150,136);font-size: 18px"></i> ${data.notAnsweredPapers[i].paperTime}分钟</p>
                                        <p><i class="layui-icon layui-icon-about"
                                                style="color:rgb(0,150,136);font-size: 20px"></i> 考试要求</p>
                                    </div>
                                    <div class="layui-col-md3" style=" float: left;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;">
                                        <div
                                            style="border:1px solid rgb(239,249,253);width: 130px;height: 40px;margin-top:25px;background-color:rgb(239,249,253);text-align: center">
                                            <p style="margin-top:7px;">未作答 <a class="layui-icon layui-icon-edit" lay-href="toentrance" 
                                                    style="color: rgb(0,158,231);font-size: 20px;cursor: pointer;"></a>
                                            </p>


                                        </div>
                                    </div>
                                    <div class="layui-col-md12">
                                        <div class="layui-bg-gray"> &nbsp;${data.notAnsweredPapers[i].createdTeacher} 老师提供</div>
                                    </div>
                                </div>
                            </div>
                        </div>`)
                    }
                   // $("#showNotAnsweredInfo").html(str)
                    laypage.render({
                            elem: 'middlepage'
                            , count: str.length
                            ,limit:3
                            , jump: function (obj) {
                                //模拟渲染
                                document.getElementById('showNotAnsweredInfo').innerHTML = function () {
                                    var arr = []
                                        , thisData = str.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                                    layui.each(thisData, function (index, item) {
                                        arr.push(item);
                                    });
                                 
                                    return arr.join('');
                                }();
                            }
                        });
                }

            })
            $.ajax({
                url: "/getGradelist",
                type: "POST",
                async:false,
                dataType: "json",
                success: function (data) {
                    console.log(data)
                    var str = []
                    for (var i = 0; i < data.length; i++) {
                        str.push(`<li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">${data[i].date}</h3>
                                    <div class="gradelist" style="border:1px solid #e2e2e2;height: 40px;width:25%;">
                                        <p>${data[i].paper_name}</p>
                                    </div>
                                    <div class="gradelist"
                                        style="border:1px solid #e2e2e2;height: 40px;width:60px;margin-left: 15px;">
                                        <p>${data[i].score}</p>
                                    </div>
                                    <div class="gradelist"
                                        style="border:1px solid #e2e2e2;height: 40px;width:60px;margin-left: 15px">
                                        <a class="layui-icon layui-icon-file-b"
                                            style="font-size: 20px;color: #FF5722;" href="report?paper_id=${data[i].paper_id}" target="_parent"></a>
                                    </div>



                                    <hr>
                                   


                                </div>
                            </li>`)
                    }
                    $("#showgradelist").html(str)

                }
            })

        });

    </script>



    <script>
        layui.config({
            base: '/static/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'senior']);
    </script>
   
</body>

</html>